<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>收集报名信息</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/public.js"></script>
</head>
<body>
    <div class="gather">
        <p class="error">手机号码格式错误</p>
        <div class="personal">
            <div class="list"><label>姓名</label><input type="text" id="name" placeholder="请输入您的姓名"></div>
            <div class="list"><label>公司名称</label><input type="text" id="company" placeholder="请输入公司名称"></div>
            <div class="list bdnone"><label>公司职务</label><input type="text" id="duty" placeholder="请输入公司职务"></div>
        </div>
        <div class="relation">
            <div class="list"><label>邮箱</label><input type="text" id="mail" placeholder="请输入常用邮箱"></div>
            <div class="list bdnone"><label>手机号</label><input type="text" id="iphone" placeholder="请输入手机号码"></div>
        </div>
        <p class="choose">
            <span class="check"></span> 
            <span class="agree">已阅读并同意</span>
            <span class="protocol">《购票协议》</span>
        </p>
        <button class="sumit">立即支付</button>

        <!-- 购票协议 -->
        <div class="bg">
            <div class="box">
                <div class="bd">
                <h3>《购票协议》</h3>
                <p>（一）本届区块链世界论坛采用网上购票形式，采取二维码一次验证入场的方式，通过网络购票的观取二维码一次验证入场的方式，通过网络购票的观众，需认真填写相关信息，如在填写购票信息时有误，造成无法入场的后果，购票者自行承担；</p>
                <p>（二）不同门票类型对应不同的门票权益，请仔细阅读权益细则，报名成功即视为接受权益细则；报名成功后请截图保存二维码，论坛当天出示验证。</p>
                <p>（三）贵宾票2999元为论坛报名基础门票，如您想升级为白金票、黑金票、钻石票或仅报名法链游学班一项，请您在缴纳基础门票费之后与论坛组委会会务人员联系，组委会将另行发送邀请函。</p>
                <p>（四）通过网络购买区块链世界论坛门票的观众，可参加门票有效期内举办的所有论坛（闭门会除外）及展览活动。详细日程、准确信息等以官方信息及当日公布为准；</p>
                <p>（五）二维码电子票为有价证券，一经出售不退不换；</p>
                <p>（六）现场观众需服从组委会工作人员的指引，按序进入验证票区域及通过安检参加论坛；</p>
                <p>（七）论坛购票截止日期为7月24日00:00；</p>
                <p>（八）最终解释权归区块链世界论坛组委会所有。</p>
                </div>
            </div>
            <span class="close"></span>
        </div>
    </div>
</body>

<script>
    var oClose = document.querySelector('.close'),
        oBg = document.querySelector('.bg'),
        oProc = document.querySelector('.protocol'),
        oChoose = document.querySelector('.choose'),
        oSpan = oChoose.querySelectorAll('span'),
        oSmit = document.querySelector('.sumit'),
        aError = document.querySelector('.error'),
        oName = document.querySelector('#name'),
        oCompany = document.querySelector('#company'),
        oDuty = document.querySelector('#duty'),
        oMail = document.querySelector('#mail'),
        oIphone = document.querySelector('#iphone'),
        bool = false;
    //验证输入信息 
    function erro(){
        aError.style.display = 'block';
        if(oName.value == ''){
            return '请输入您的姓名';
        }else if(oCompany.value == ''){
            return '请输入公司名称';
        }else if(oDuty.value == ''){
            return'请输入公司职务';
        }else if(oMail.value == ''){
            return '请输入您的邮箱';
        }else if(!checkEmail(oMail.value)){
            return '请输入正确邮箱';
        }else if(oIphone.value == ''){
            return '请输入您的手机号';
        }else if(!checkMobile(oIphone.value)){
            return '请输入正确手机号';
        }else if(!bool){
           return '请同意购票协议';
        }else{
            aError.style.display = 'none';
            // 执行后续代码
        }
    }
    oClose.onclick = function(){
        oBg.style.display = 'none';
    }
    oProc.onclick = function(){
        oBg.style.display = 'block';
    }
    oChoose.onclick = function(){
        if(bool){
            oSpan[0].className = 'check';
            bool = false;
        }else{
            oSpan[0].className = 'checked';
            bool = true;
        }  
    }

    oSmit.onclick = function(){
        aError.innerHTML = erro();
        setTimeout(() => {
            aError.style.display = 'none';
        }, 1000);
    }
</script>
</html>